<template>
	<view class="feedback">
		<view class="top">
			<view class="msg flex-column middle">
				<text class="f20" style="color:#FDFDFD">联系我们</text>
				<text style="margin-top:18rpx;margin-left: 24rpx;color:#f5e6e6;" class="f14">可从下方的多种渠道联系到我们</text>
			</view>
		</view>
		<view class="cardBox ">
			<button id="card1" open-type="contact" style="display:none"></button>
			<label for="card1">
				<view class="card flex-row" hover-class="card-hover" hover-stay-time="30">
					<image class="cardIcon" src="/static/shezhi.png"></image>
					<view class="cardTitleBox f18 flex-column">
						<text>在线客服</text>
						<text class="cardTitleMsg f14">无需添加微信好友，直接与开发者取得联系</text>
					</view>
					<view class="cardBtnBox">
						<text class="cardBtn iconfont icon-zhankai"></text>
					</view>
				</view>
			</label>


			<button id="card4" style="display:none" @click="toFanhui"></button>
			<label for="card4">
				<view class="card flex-row" hover-class="card-hover" hover-stay-time="30">
					<image class="cardIcon" src="/static/shezhi.png"></image>
					<view class="cardTitleBox f18 flex-column">
						<text>反馈建议区</text>
						<text class="cardTitleMsg f14">在联系不上开发者时提交建议和反馈的专门渠道</text>
					</view>
					<view class="cardBtnBox">
						<text class="cardBtn iconfont icon-zhankai"></text>
					</view>
				</view>
			</label>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toFanhui() {
				console.log(666);
				uni.navigateTo({
					url: '/pages/feedback/src/feddback'
				})
			}
		},
		created() {

		}
	}
</script>

<style scoped lang="less">
	.feedback {
		height: 100%;
		color: #262627;
		padding-bottom: 25px;

		.top {
			width: 100%;
			height: 200rpx;
			background-color: #10AEFF;

			.middle {
				transform: translateY(20rpx);
				margin: 8rpx 25rpx 12rpx 25rpx;
			}
		}

		.cardBox {
			transform: translateY(-25px);
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: #FDFDFD;
			border-radius: 25px 25px 0 0;
			box-shadow: 0px -5px 3px -3px #2894cc;
			display: flex;
			flex-direction: column;
			padding-top: 6rpx;
		}
	}



	.card {
		width: 668rpx;
		height: 216rpx;
		margin: 16rpx 25rpx;
		padding: 12rpx 16rpx;
		background-color: #FFECE4;
		border-radius: 32rpx;
		line-height: 70rpx;
		box-shadow: 8px 8px 8px -8px #7c7c7e;
	}

	.card-hover {
		background-color: #fcc9b4;
	}

	.cardIcon {
		width: 140rpx;
		height: 140rpx;
		/* background-color: #aacaea; */
		border-radius: 70rpx;
	}

	.cardTitleBox {
		margin-left: 24rpx;
		width: 444rpx
	}

	.cardTitleMsg {
		color: #7E7F80;
		line-height: 30rpx;
		padding-left: 12rpx;
	}

	.cardBtnBox {
		width: 60rpx;
		height: 80rpx;
		padding: 68rpx 0rpx;
	}

	.cardBtn {
		height: 120rpx;
		width: 30rpx;
		padding-left: 30rpx;
	}
</style>
